import { shallowRef } from 'vue'
import * as echarts from 'echarts'

export const useChart = () => {
  const chartInstance = shallowRef()
  const domRef = shallowRef()

  function register(dom) {
    domRef.value = dom
  }
  function initChart(initOption) {
    chartInstance.value = echarts.init(domRef.value)
    chartInstance.value.setOption(initOption)
  }
  function screenAdapter(apdaterOption) {
    chartInstance.value.setOption(apdaterOption)
    chartInstance.value.resize()
  }
  function updateChart(dataOption) {
    chartInstance.value.setOption(dataOption, {
      replaceMerge: ['dataset', 'series']
    })
  }
  function clearChart() {
    chartInstance.value.clear()
  }
  return {
    register,
    initChart,
    screenAdapter,
    updateChart,
    clearChart
  }
}
